<script setup>
import { useNoteStore } from '../stores/noteStore'
import { useRouter } from 'vue-router'
import { ref } from 'vue'

const noteStore = useNoteStore()
const router = useRouter()
const selectedNotes = ref(new Set())

const editNote = (id) => {
  router.push(`/notes/edit/${id}`)
}

const deleteNote = (id) => {
  if (confirm('确定要删除这条笔记吗？')) {
    noteStore.deleteNote(id)
    selectedNotes.value.delete(id)
  }
}

const toggleSelectAll = () => {
  if (selectedNotes.value.size === noteStore.notes.length) {
    // 如果全部选中，则取消全选
    selectedNotes.value.clear()
  } else {
    // 否则全选
    selectedNotes.value = new Set(noteStore.notes.map((note) => note.id))
  }
}

const toggleSelect = (id) => {
  if (selectedNotes.value.has(id)) {
    selectedNotes.value.delete(id)
  } else {
    selectedNotes.value.add(id)
  }
}

const deleteSelected = () => {
  if (selectedNotes.value.size === 0) {
    alert('请先选择要删除的笔记')
    return
  }

  if (confirm(`确定要删除选中的 ${selectedNotes.value.size} 条笔记吗？`)) {
    selectedNotes.value.forEach((id) => {
      noteStore.deleteNote(id)
    })
    selectedNotes.value.clear()
  }
}
</script>

<template>
  <div class="note-list">
    <div class="header">
      <h2>我的笔记</h2>
      <div class="header-actions">
        <div v-if="noteStore.notes.length > 0" class="select-actions">
          <label class="select-all">
            <input
              type="checkbox"
              :checked="
                selectedNotes.size === noteStore.notes.length &&
                noteStore.notes.length > 0
              "
              :indeterminate="
                selectedNotes.size > 0 &&
                selectedNotes.size < noteStore.notes.length
              "
              @change="toggleSelectAll"
            />
            全选
          </label>
          <button
            v-if="selectedNotes.size > 0"
            class="delete-selected"
            @click="deleteSelected"
          >
            <i>🗑️</i> 删除选中 ({{ selectedNotes.size }})
          </button>
        </div>
        <button @click="router.push('/notes/edit')"><i>✏️</i> 新建笔记</button>
      </div>
    </div>

    <div v-if="noteStore.notes.length === 0" class="empty">
      <div class="empty-content">
        <i>📝</i>
        <p>还没有笔记，开始创建吧！</p>
        <button @click="router.push('/notes/edit')">创建第一条笔记</button>
      </div>
    </div>

    <div v-else class="notes-grid">
      <div
        v-for="note in noteStore.notes"
        :key="note.id"
        class="note-card"
        :class="{ selected: selectedNotes.has(note.id) }"
        @click="toggleSelect(note.id)"
      >
        <div class="note-header">
          <input
            type="checkbox"
            :checked="selectedNotes.has(note.id)"
            @click.stop
            @change="toggleSelect(note.id)"
          />
          <h3>{{ note.title }}</h3>
        </div>
        <p>{{ note.content }}</p>
        <div class="actions">
          <button class="edit" @click.stop="editNote(note.id)">
            <i>✏️</i> 编辑
          </button>
          <button class="delete" @click.stop="deleteNote(note.id)">
            <i>🗑️</i> 删除
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.note-list {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-shrink: 0;
}

.header h2 {
  font-size: 1.8rem;
  color: var(--text-color);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.notes-grid::-webkit-scrollbar {
  width: 8px;
}

.notes-grid::-webkit-scrollbar-track {
  background: var(--background-color);
  border-radius: 4px;
}

.notes-grid::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.notes-grid::-webkit-scrollbar-thumb:hover {
  background: var(--text-color-secondary);
}

.empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-content {
  background: var(--card-background);
  padding: 3rem;
  border-radius: 16px;
  box-shadow: 0 4px 20px var(--shadow-color);
}

.empty i {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.empty p {
  color: #666;
  margin-bottom: 1.5rem;
}

.note-card {
  background: var(--card-background);
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--shadow-color);
  transition: all 0.3s ease;
}

.note-card:hover {
  transform: translateY(-4px);
}

.note-card h3 {
  color: var(--primary-color);
  margin-bottom: 1rem;
}

.note-card p {
  color: var(--text-color-secondary);
  margin-bottom: 1.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.actions button {
  flex: 1;
  font-size: 0.9rem;
}

.actions button.delete {
  background-color: var(--danger-color);
}

i {
  font-style: normal;
}

.header-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.select-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.select-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  color: var(--text-color);
  padding: 8px 16px;
  border-radius: 6px;
  background-color: var(--card-background);
  transition: all 0.3s ease;
}

.select-all:hover {
  background-color: color-mix(in srgb, var(--primary-color) 10%, transparent);
}

.select-all input[type='checkbox'] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--primary-color);
}

.delete-selected {
  background-color: var(--danger-color);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 16px;
  transition: all 0.3s ease;
}

.delete-selected:hover {
  background-color: color-mix(in srgb, var(--danger-color) 80%, black);
}

.note-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.note-header input[type='checkbox'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--primary-color);
  transition: all 0.2s ease;
}

.note-card {
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.note-card.selected {
  border-color: var(--primary-color);
  background-color: color-mix(
    in srgb,
    var(--primary-color) 5%,
    var(--card-background)
  );
}

.note-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px var(--shadow-color);
}

.note-card.selected:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px var(--shadow-color);
}

.note-card h3 {
  color: var(--text-color);
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.note-card.selected h3 {
  color: var(--primary-color);
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .note-list {
    padding: 8px;
  }

  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .header h2 {
    font-size: 20px;
  }

  .header-actions {
    width: 100%;
    flex-direction: column;
    gap: 8px;
  }

  .select-actions {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
  }

  .notes-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .note-card {
    padding: 12px;
  }

  .note-card h3 {
    font-size: 16px;
  }

  .note-card p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 14px;
  }

  .actions {
    flex-direction: row;
    gap: 8px;
  }

  .actions button {
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* 平板适配 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .notes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
</style>
